<template>
    <el-card class="controller-config-card">
        <template #header v-if="configData != null">
            <!-- 一个图标，提示该控制器是ground-control还是locomotive-control -->
            <ElTooltip :content="configData.role == 'ground-control' ? '地面控制器' : '机车/列车控制器'">
                <SVGIcon :asset-url="configData.role == 'ground-control' ? 'railroad_light.svg' : 'train.svg'">
                </SVGIcon>
            </ElTooltip>

            <span style="margin-left: 6px;"> {{ configData != null ? configData.device_name : "<控制器不存在>" }}</span>
            <div class="flex-spacer"></div>
            <div class="card-header">
                <ElButtonGroup class="config-title-buttongroup">
                    <ElButton @click="onActivatedStatusChange" :disabled="(configData.activated)"
                        :type="(configData.activated) ? 'primary' : 'info'">
                        <ElIcon>
                            <SwitchButton />
                        </ElIcon>
                    </ElButton>
                    <ElButton @click="duplicateControllerConfig">
                        <ElIcon>
                            <CopyDocument />
                        </ElIcon>
                    </ElButton>
                    <ElButton @click="deleteControllerConfig" type="danger">
                        <ElIcon>
                            <Delete></Delete>
                        </ElIcon>
                    </ElButton>
                </ElButtonGroup>
            </div>
        </template>
        <template v-if="configData != null">
            <div class="form-row">
                <p class="form-label">控制器别名</p>
                <div class="form-component-grow">
                    <ElInput v-model="configData.alias" />
                </div>
            </div>
            <!-- {{ config }} -->
            <template v-if="configData.role == 'locomotive-control'">
                <div class="form-row">
                    <p class="form-label">油门曲线</p>
                    <ThrottleCurve class="form-component-grow" :curve="configData.drive_curve"
                        @update:curve="configData.drive_curve = $event">
                    </ThrottleCurve>
                </div>
                <div class="form-row">
                    <p class="form-label">油门反向</p>
                    <div class="form-component-grow">
                        <ElSwitch v-model="configData.motor_reversed" />
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="form-row">
                    <p class="form-label-wide">电磁铁控制-逻辑芯片数量</p>
                    <div class="form-component-grow">
                        <el-input-number v-model="configData.electromagnet_595_chips" :min="1" :max="4" />
                    </div>
                </div>
                <div class="form-row">
                    <p class="form-label-wide">LED控制-逻辑芯片数量</p>
                    <div class="form-component-grow">
                        <el-input-number v-model="configData.led_595_chips" :min="1" :max="8" />
                    </div>
                </div>
            </template>
        </template>
    </el-card>
</template>
<style lang="css">
.controller-config-card {
    max-width: 400px;
    min-width: 400px;
    margin-bottom: 12px;
    margin-left: 12px;
}

.config-title-buttongroup {
    margin-left: 12px;
    display: flex !important;
    flex-wrap: nowrap;
}

.el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>
<script lang="ts" setup>
import { defineProps, PropType, watch, onBeforeMount, ref, onMounted, nextTick } from "vue"
import { DeviceFunctionalConfig } from "@/models"
import ThrottleCurve from "./ThrottleCurve.vue";
import { ElInput, ElMessageBox, ElSwitch, ElTooltip } from "element-plus";
import { CopyDocument, Delete, SwitchButton } from "@element-plus/icons-vue"
import SVGIcon from "@/components/basic_widgets/SVGIcon.vue";
import { deepCopy } from "element-sci-ui";
const props = defineProps({
    config: {
        type: Object as PropType<DeviceFunctionalConfig>,
        required: true
    }
})
const configData = ref<DeviceFunctionalConfig | null>(null)
onBeforeMount(() => {
    configData.value = props.config
})
const emits = defineEmits(['update:config', "delete-controller-config", "copy-controller-config",
    "activate-status-change"
])
const duplicateControllerConfig = () => {
    const cfgData = deepCopy<DeviceFunctionalConfig>(configData.value)
    cfgData.activated = false
    emits("copy-controller-config", cfgData)
}
const onActivatedStatusChange = () => {
    emits("activate-status-change", !(configData.value?.activated))
}

const deleteControllerConfig = () => {
    ElMessageBox.confirm("确定删除该道岔配置吗？删除后信息无法找回", "删除道岔配置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        emits("delete-controller-config")
    })

}
// 是否允许监听配置表单
let allowWatchForm = false
onMounted(() => {
    watch(() => configData, () => {
        console.log("configData changed")
        if (allowWatchForm) {
            emits('update:config', props.config)
        }
    }, { deep: true })
    watch(() => props.config, async () => {
        allowWatchForm = false
        configData.value = props.config
        await nextTick()
        await nextTick()
        allowWatchForm = true
    }, { deep: true })
})

</script>
<style lang="css"></style>